<template>
  <header
    class="
      fixed
      top-0
      left-0
      z-20
      flex
      items-center
      justify-between
      w-full
      px-4
      py-3
      md:h-16 md:px-8
      bg-gradient-to-r
      from-primary-500
      to-primary-400
    "
  >
    <router-link
      to="/home"
      class="
        float-none
        text-lg
        not-italic
        font-black
        tracking-wider
        text-white
        brand-main
        md:float-left
        font-base
        hidden
        md:block
      "
    >
      <div class="w-full h-8 space-x-2">
        <!-- 同步内容 -->
        <img :src="img200" class="h-8 inline"/>
        <span>ECR DOC</span>
      </div>
    </router-link>

    <ul class="flex float-right h-8 m-0 list-none md:h-9">
      <!--   展示设备   -->

      <!-- User Dropdown-->
      <li class="relative block float-left ml-2">
        <BaseDropdown width-class="w-48">
          <template #activator>
            <img
              :src="default_avatar"
              class="block w-8 h-8 rounded md:h-9 md:w-9"
            />
          </template>

          <router-link to="/account-settings">
            <BaseDropdownItem>
              <BaseIcon
                name="UserIcon"
                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                aria-hidden="true"
              />
              {{ $t('general.profile') }}
            </BaseDropdownItem>
          </router-link>

          <BaseDropdownItem @click="logout">
            <BaseIcon
              name="ArrowRightOnRectangleIcon"
              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
              aria-hidden="true"
            />
            {{ $t('general.logout') }}
          </BaseDropdownItem>
        </BaseDropdown>
      </li>
    </ul>
  </header>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
// 模板
import img200 from "@/assets/200x200.png"
import default_avatar from "@/assets/default-avatar.jpg"

const authStore = useAuthStore()
const router = useRouter()

function logout() {
  authStore.logout()
  router.push('/login')
}

</script>
